﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZRender">
    <meta name="author" content="kener.linfeng@gmail.com">

    <script src="../asset/js/esl/esl.js"></script>
    <script src="../asset/js/codemirror.js"></script>
    <script src="../asset/js/javascript.js"></script>

    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../asset/css/codemirror.css" rel="stylesheet">
    <link href="../asset/css/monokai.css" rel="stylesheet">
    <link href="../asset/css/zrenderHome.css" rel="stylesheet">
    <link rel="shortcut icon" href="../asset/ico/favicon.png">
</head>

<body>
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../../index.html">ZRender</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/zrender">View on GitHub</a>
              <ul class="nav">
                <li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Example <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="demo.html">Demo</a></li>
                    <li class="active"><a href="animation.html">Animation</a></li>
                    <li><a href="chart.html">Chart</a></li>
                    <li><a href="colorSeries.html">Color Series</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="artist.html">Artist</a></li>
                    <li><a href="slice.html">slice</a></li>
                  </ul>
                </li>
                <li><a href="../api/index.html" target="_blank">API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/zrender/archive/2.0.8.zip">ZIP (2.0.8)</a></li>
                    <li><a href="https://github.com/ecomfe/zrender/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://echarts.baidu.com" target="_blank">ECharts</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container-fluid">
        <div class="row-fluid">
            <div id="sidebar-code" class="span4">
                <div class="well sidebar-nav">
                    <div class="nav-header">code
                    <a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>
                    </div>
                    <textarea id="code" name="code">
/*
 *  zr has been init like this, just use it!
 *
 *  var zrender = require('zrender');
 *  var zr = zrender.init(document.getElementById('main'));
 */
clearInterval(animationTicket); // 请跳过这句，动画索引
zr.clear();
var color = require('zrender/tool/color');
var colorIdx = 0;
var width = Math.ceil(zr.getWidth());
var height = Math.ceil(zr.getHeight());

var i;
var n = 50;
var shapeList = [];
var CircleShape = require('zrender/shape/Circle');
// 动画元素
for(i = 0; i < n; i++) {
    shapeList[i] = new CircleShape({
        style : {
            x : Math.ceil(Math.random() * width),
            y : Math.ceil(Math.random() * height),
            r : Math.ceil(Math.random() * 40),
            brushType : Math.ceil(Math.random() * 100) % 3 >= 1 ? 'both' : 'stroke',
            color : 'rgba('
                    + Math.round(Math.random() * 256) + ','
                    + Math.round(Math.random() * 256) + ','
                    + Math.round(Math.random() * 256) + ', 0.5)',
            strokeColor : 'rgba('
                    + Math.round(Math.random() * 256) + ','
                    + Math.round(Math.random() * 256) + ','
                    + Math.round(Math.random() * 256) + ', 0.3)',
            lineWidth : 3
        },
        _animationX : Math.ceil(Math.random() * 20),
        _animationY : Math.ceil(Math.random() * 20),
        hoverable : false
    });
    if (shapeList[i].style.x < 100 || shapeList[i].style.x > (width - 100)) {
        shapeList[i].style.x = width / 2;
    }
    if (shapeList[i].style.y < 100 || shapeList[i].style.y > (height - 100)) {
        shapeList[i].style.y = height / 2;
    }
    zr.addShape(shapeList[i]);
}

// 绘画，利用render的callback可以在绘画完成后马上开始动画
zr.render(function(){
    animationTicket = setInterval(
        function(){
            var style;
            for( i = 0; i < n; i++) {
                // 可以跳过
                style = shapeList[i].style;
                if (style.brushType == 'both') {
                    if (style.x + style.r + shapeList[i]._animationX >= width
                        || style.x - style.r + shapeList[i]._animationX <= 0
                    ){
                        shapeList[i]._animationX = -shapeList[i]._animationX;
                    }
                    shapeList[i].style.x += shapeList[i]._animationX;
                }

                if (style.brushType == 'both') {
                    if (style.y + style.r + shapeList[i]._animationY >= height ||
                        style.y - style.r + shapeList[i]._animationY <= 0){
                        shapeList[i]._animationY = -shapeList[i]._animationY;
                    }
                    shapeList[i].style.y += shapeList[i]._animationY;
                }
                else {
                    if (style.y - shapeList[i]._animationY + style.r <= 0){
                        shapeList[i].style.y = height + style.r;
                        shapeList[i].style.x = Math.ceil(Math.random() * width);
                    }
                    shapeList[i].style.y -= shapeList[i]._animationY;
                }


                // 就看这句就行
                zr.modShape(shapeList[i].id, shapeList[i]);
            }
            zr.refresh();
        },
        50
    )
});
                    </textarea>
              </div><!--/.well -->
            </div><!--/span-->
            <div id="graphic" class="span8">
                <div id="main" class="main"></div>
                <div>
                    <button onclick="refresh(true)">Refresh ~</button>
                    <span id='wrong-message' style="color:red"></span>
                </div>
            </div><!--/span-->
        </div><!--/row-->
        <hr>
        <!-- FOOTER -->
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/zrender/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div><!--/.fluid-container-->

    <script src="../asset/js/jquery.js"></script>
    <script src="../asset/js/bootstrap-transition.js"></script>
    <script src="../asset/js/bootstrap-alert.js"></script>
    <script src="../asset/js/bootstrap-modal.js"></script>
    <script src="../asset/js/bootstrap-dropdown.js"></script>
    <script src="../asset/js/bootstrap-scrollspy.js"></script>
    <script src="../asset/js/bootstrap-tab.js"></script>
    <script src="../asset/js/bootstrap-tooltip.js"></script>
    <script src="../asset/js/bootstrap-popover.js"></script>
    <script src="../asset/js/bootstrap-button.js"></script>
    <script src="../asset/js/bootstrap-collapse.js"></script>
    <script src="../asset/js/bootstrap-carousel.js"></script>
    <script src="../asset/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        var animationTicket;    // 全局动画索引
    </script>
    <script src="../asset/js/zrenderDemo.js"></script>
</body>
</html>